<template>
  <div class="user_edit">
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()">
    </van-nav-bar>

    <input type="file" hidden accept="image/*" id="file" @change="change" />

    <van-cell title="头像" center>
      <!-- 使用 title 插槽来自定义标题 -->
      <label for="file">
        <van-image
          width="50"
          height="50"
          round
          fit="cover"
          :src="userInfo.avatar"
        />
      </label>
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="userInfo.nickname"
      @click="showDialog"
    />
    <van-cell
      title="性别"
      is-link
      :value="userInfo.sex || '请选择性别'"
      @click="sexPickerShow = true"
    />
    <!-- 弹出层组件 -->
    <van-popup v-model="sexPickerShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="['男', '女']"
        @confirm="sexPickerConfirm"
        @cancel="sexPickerShow = false"
      />
    </van-popup>

    <van-cell
      title="生日"
      is-link
      @click="datePickerShow = true"
      :value="userInfo.birthday || '请选择生日'"
    />
    <!-- 生日弹窗 -->
    <van-popup v-model="datePickerShow" position="bottom">
      <van-datetime-picker
        @confirm="datePickerConfirm"
        @cancel="datePickerShow = false"
        :value="
          userInfo.birthday
            ? new Date(userInfo.birthday)
            : new Date('2000/01/01')
        "
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>

    <van-button
      class="true"
     color="#4fc08d"
      size="normal"
      :square="true"
      native-type="submit"
      block
      @click="save"
      >确定</van-button
    >
    <van-dialog v-model="nickDialogShow" title="昵称" show-cancel-button>
      <input type="text" v-model="userInfo.nickname" />
    </van-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { Dialog } from "vant";
import sexPickerMixin from "./sexPickerMixin";
import datePickerMixin from "./datePickerMixin";
import { setuserInfo } from "@/api/zhuce";
export default {
  name: "userInfo",
  data() {
    return {
      userInfo: {},
      nickDialogShow: false,
    };
  },
  mixins: [sexPickerMixin, datePickerMixin],
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  // created() {
  //   this.userInfo = JSON.parse(JSON.stringify(this.$store.state.userInfo));
  // },
  //缺陷
  watch: {
    "$store.state.userInfo": {
      immediate: true, //正常流程进来
      handler(n, o) {
        this.userInfo = JSON.parse(JSON.stringify(n));
      },
    },
  },
  methods: {
    ...mapActions(["upload"]),
    //保存
    save() {
      console.log(this.userInfo);
      let { nickname, avatar, _id: uid, birthday, sex } = this.userInfo;
      console.log(nickname, avatar, uid, birthday, sex);
        //调接口
      setuserInfo({
        nickname,
        avatar,
        uid,
        birthday,
        sex,
      }).then((res) => {
        console.log(res);
        this.$toast(res.msg);

        if (res.code == 0) {
          //  vuex里的还没改
          // 1. 本地修改   麻烦一点省流量
          // this.$store.commit('save',['userInfo',{ nickname, avatar,_id:uid, birthday, sex}])

          // 2. 调一下接口 浪费 但是严谨
          this.$store.dispatch("getuserInfo", localStorage.getItem("token"));

          setTimeout((v) => {
            this.$router.back();
          }, 300);
        }
      });

      //成功以后
    },
    //修改昵称
    showDialog() {
      this.nickDialogShow = true;
    },
    async change(e) {
      // e.target.files
      let fileList = [...e.target.files].map((v) => {
        return {
          file: v,
        };
      });
      let [avatar] = await this.upload(fileList);
      console.log(avatar);
      this.userInfo.avatar = avatar;
    },
  },
};
</script>

<style lang="less">

.true {
  width: 300px;
  margin: 30px auto;
}
</style>